import {useState} from 'react';
import sty from '@/style.module/editor/components/Canvas.module.scss';
import {
    IconCopy,
    IconFileImage,
    IconMinus,
    IconNav,
    IconObliqueLine,
    IconPen,
    IconPlus,
    IconRedo,
    IconUndo,
    IconVideoCamera,
} from '@arco-design/web-react/icon';
import ScrollArea from 'react-scrollbar';

export default function Canvas() {

    const editor = () => {
        console.log('editor');
    };

    const [toolMenu] = useState([
        {icon: <IconPen />, handler: editor},
        {icon: <IconFileImage />, handler: editor},
        {icon: <IconCopy />, handler: editor},
        {icon: <IconObliqueLine />, handler: editor},
        {icon: <IconNav />, handler: editor},
        {icon: <IconVideoCamera />, handler: editor},
    ]);

    return (
        <div className={sty.container} id='canvas'>
            <header className={sty.header}>
                <aside className={sty.asideLeft}>
                    <span className={sty.icon}>
                        <IconUndo />
                    </span>
                    <span className={sty.icon}>
                        <IconRedo />
                    </span>
                </aside>

                <menu className={sty.toolMenu}>
                    {toolMenu.map((tool, index) => {
                        return (
                            <span
                                className={sty.icon}
                                onClick={tool.handler}
                                key={index}
                            >
                                {tool.icon}
                            </span>
                        );
                    })}
                </menu>

                <aside className={sty.asideRight}>
                    <span className={sty.icon}>
                        <IconMinus />
                    </span>
                    <span className={sty.icon}>
                        <IconPlus />
                    </span>
                </aside>
            </header>
            <div className={sty.canvasContainer}>
                <ScrollArea
                    horizontal={true}
                    vertical={true}
                    className={sty.canvasScrollbar}
                    contentStyle={{
                        width: '1800px',
                        height: '1600px',
                    }}
                >
                    <div className={sty.canvasWaper} style={{}}>
                        <div className={sty.canvas} style={{}}></div>
                    </div>
                </ScrollArea>
            </div>
        </div>
    );
}
